﻿@import "_reset.less";

#loading {
  position   : fixed;
  z-index    : 999999;
  left       : 0;
  right      : 0;
  top        : 0;
  bottom     : 0;
  background : #000;
}

* {
  background-size     : 100% 100% !important;
  background-repeat   : no-repeat !important;
  background-position : center center !important;
}

.background {
  position   : fixed;
  z-index    : -1;
  left       : 0;
  right      : 0;
  top        : 0;
  bottom     : 0;
  background : url(../img/bg.jpg);
}

.page1 {
  position    : fixed;
  z-index     : 3;
  width       : 640px;
  height      : 900px;
  left        : 50%;
  top         : 50%;
  margin-left : -320px;
  margin-top  : -450px;

  .logo-light {
    position    : absolute;
    width       : 466px;
    height      : 466px;
    left        : 50%;
    top         : 50%;
    margin-left : -233px;
    margin-top  : -263px;
    background  : url(../img/p1-logo-light.png);
  }

  .logo {
    position    : absolute;
    width       : 185px;
    height      : 142px;
    left        : 50%;
    top         : 50%;
    margin-left : -92px;
    margin-top  : -101px;
    background  : url(../img/p1-logo.png);
  }

  .tip {
    position    : absolute;
    width       : 640px;
    height      : 50px;
    left        : 50%;
    top         : 50%;
    margin-left : -320px;
    margin-top  : 70px;
    font-size   : 30px;
    color       : #fff;
    text-align  : center;
  }

  .content {
    position    : absolute;
    width       : 640px;
    height      : 1280px;
    left        : 50%;
    top         : 50%;
    margin-top  : -540px;
    margin-left : -320px;
    background  : url(../img/p1-content.png);
  }

  .cloud-u {
    position    : absolute;
    width       : 178px;
    height      : 30px;
    right       : 70px;
    top         : 50%;
    margin-top  : -30px;
    background  : url(../img/p1-cloud-u.png);
  }

  .cloud-d {
    position    : absolute;
    width       : 155px;
    height      : 28px;
    left        : 70px;
    top         : 50%;
    margin-top  : 230px;
    background  : url(../img/p1-cloud-d.png);
  }

  .rocket {
    position    : absolute;
    width       : 124px;
    height      : 123px;
    left        : 110px;
    top         : 50%;
    margin-top  : -110px;
    background  : url(../img/p1-rocket.png);
  }

  .money {
    position    : absolute;
    width       : 116px;
    height      : 263px;
    left        : 50%;
    top         : 50%;
    margin-left : -58px;
    margin-top  : -180px;
    background  : url(../img/p1-money.png);
  }

  .super {
    position    : absolute;
    width       : 103px;
    height      : 104px;
    right       : 110px;
    top         : 50%;
    margin-top  : -100px;
    background  : url(../img/p1-super.png);
  }

  .slogan {
    position    : absolute;
    width       : 519px;
    height      : 269px;
    left        : 50%;
    top         : 50%;
    margin-left : -250px;
    margin-top  : -420px;
    background  : url(../img/p1-slogan.png);
  }

  .btn {
    position    : absolute;
    width       : 476px;
    height      : 85px;
    left        : 50%;
    top         : 50%;
    margin-left : -238px;
    margin-top  : 330px;
    background  : url(../img/p1-btn.png);
  }

  .logo {
    opacity : 1;
    -webkit-transform  : scale(0.8, 0.8);
    -webkit-transition : all 0.5s 1s;
  }
  &.active .logo {
    opacity : 0.01;
    -webkit-transition : all 2s 2s;
  }

  .logo-light {
    opacity : 0.01;
  }
  &.active .logo-light {
    -webkit-animation : logolight 4s forwards;
  }
  @-webkit-keyframes logolight {
    0%   { opacity : 0.01; }
    50%  { opacity : 0.5; }
    100% { opacity : 0.01; }
  }

  .tip {
    opacity : 1;
    -webkit-transition : all 0.5s 1s;
  }
  &.active .tip {
    opacity : 0.01;
    -webkit-transition : all 2s 2s;
  }

  .slogan {
    opacity : 0.01;
    -webkit-transform  : translateY(-60px);
    -webkit-transition : all 0.5s 1s;
  }
  &.active .slogan {
    opacity : 1;
    -webkit-transform  : translateY(0);
    -webkit-transition : all 1s 4s;
  }

  .content {
    opacity : 0.01;
    -webkit-transition : all 0.5s 1s;
  }
  &.active .content {
    opacity : 1;
    -webkit-transition : all 2s 4s;
  }

  .cloud-u {
    opacity : 0.01;
    -webkit-transform  : translateX(40px);
    -webkit-transition : all 0.5s 1s;
  }
  &.active .cloud-u {
    opacity : 1;
    -webkit-transform  : translateX(0);
    -webkit-transition : all 2s 5s;
  }

  .cloud-d {
    opacity : 0.01;
    -webkit-transform  : translateX(-40px);
    -webkit-transition : all 0.5s 1s;
  }
  &.active .cloud-d {
    opacity : 1;
    -webkit-transform  : translateX(0);
    -webkit-transition : all 2s 5s;
  }

  .money {
    opacity : 0.01;
    -webkit-transform  : translateY(-80px);
    -webkit-transition : all 0.5s 1s;
  }
  &.active .money {
    opacity : 1;
    -webkit-transform  : translateY(0);
    -webkit-transition : all 2s 5s;
  }

  .rocket {
    opacity : 0.01;
    -webkit-transform  : translateX(40px) translateY(40px);
    -webkit-transition : all 0.5s 1s;
    -webkit-transform-origin : right bottom;
  }
  &.active .rocket {
    opacity : 1;
    -webkit-transform  : translateX(0px) translateY(0px);
    -webkit-transition : all 2s 5s;
  }

  .super {
    opacity : 0.01;
    -webkit-transform  : translateX(-40px) translateY(40px);
    -webkit-transition : all 0.5s 1s;
    -webkit-transform-origin : left bottom;
  }
  &.active .super {
    opacity : 1;
    -webkit-transform  : translateX(0px) translateY(0px);
    -webkit-transition : all 2s 5.5s;
  }

  .btn {
    opacity : 0.01;
    -webkit-transform  : translateY(60px);
    -webkit-transition : all 0.5s 1s;
  }
  &.active .btn {
    opacity : 1;
    -webkit-transform  : translateY(0);
    -webkit-transition : all 1s 4s;
  }
}

.page2 {
  position    : fixed;
  z-index     : 1;
  width       : 640px;
  height      : 700px;
  left        : 50%;
  bottom      : 0px;
  margin-left : -320px;
  -webkit-transform-origin : center bottom;

  .content {
    position   : absolute;
    left       : 0;
    right      : 0;
    top        : 0;
    bottom     : 0;
    background : url(../img/p2-content.png);
  }

  .fps {
    position    : absolute;
    width       : 640px;
    height      : 40px;
    left        : 50%;
    top         : 50%;
    margin-left : -320px;
    margin-top  : 95px;
    line-height : 40px;
    font-size   : 26px;
    color       : #ff9600;
    text-align  : center;
    font-weight : bold;
  }

  .points {
    position    : absolute;
    width       : 640px;
    height      : 40px;
    left        : 50%;
    top         : 50%;
    margin-left : -320px;
    margin-top  : 57px;
    line-height : 40px;
    font-size   : 24px;
    color       : #ff9600;
    text-align  : center;
  }

  .type {
    position    : absolute;
    width       : 640px;
    height      : 40px;
    left        : 50%;
    top         : 50%;
    margin-left : -320px;
    margin-top  : 249px;
    line-height : 40px;
    font-size   : 24px;
    color       : #fff;
    text-align  : center;
  }

  .bar {
    overflow      : hidden;
    position      : absolute;
    width         : 320px;
    height        : 5px;
    left          : 50%;
    top           : 50%;
    margin-left   : -160px;
    margin-top    : 230px;
    border-radius : 5px;
    background    : #564b2b;

    .inner {
      position   : absolute;
      width      : 120px;
      height     : 5px;
      left       : -120px;
      top        : 0;
      background : url(../img/p2-progress-bar.png);
    }
  }

  .content {
    opacity : 0.01;
    -webkit-transform  : translateY(200px);
    -webkit-transition : all 0.5s 1s;
  }

  &.active .content {
    opacity : 1;
    -webkit-transform  : translateY(0);
    -webkit-transition : all 1s 1s;
  }

  .bar .inner {
    -webkit-animation : swipe 2s infinite;
  }

  @-webkit-keyframes swipe {
    from { -webkit-transform : translateX(0%); }
    to   { -webkit-transform : translateX(350%); }
  }
}

canvas {
  position : fixed;
  z-index  : -1;
  left     : 0;
  top      : 0;
  right    : 0;
  bottom   : 0;
}

.result-pop {
  position   : fixed;
  z-index    : 2;
  left       : 0;
  top        : 0;
  right      : 0;
  bottom     : 0;
  background : rgba(0, 0, 0, 0.8);

  .wrapper {
    position    : absolute;
    width       : 640px;
    height      : 900px;
    left        : 50%;
    top         : 50%;
    margin-left : -320px;
    margin-top  : -450px;
  }

  .logo {
    position   : absolute;
    width      : 72px;
    height     : 54px;
    right      : 10px;
    top        : 10px;
    background : url(../img/pop-logo.png);
  }

  .show {
    display  : none;
    position : absolute;
    left     : 0;
    top      : 0;
    right    : 0;
    bottom   : 0;

    .content {
      position    : absolute;
      width       : 640px;
      height      : 500px;
      left        : 50%;
      top         : 50%;
      margin-left : -320px;
      margin-top  : -400px;
    }

    &.show-low .content {
      background : url(../img/pop-low-content.png);
    }
    &.show-mid .content {
      background : url(../img/pop-mid-content.png);
    }
    &.show-high .content {
      background : url(../img/pop-high-content.png);
    }

    &.show-low {
      .cloud {
        position : absolute;
        width    : 163px;
        height   : 63px;
        left     : 50%;
        top      : 50%;
      }
      .cloud1 {
        margin-left : -240px;
        margin-top  : -130px;
        background  : url(../img/pop-low-cloud1.png);
        -webkit-animation : move 2s linear 1s infinite alternate;
      }
      .cloud2 {
        margin-left : 80px;
        margin-top  : 20px;
        background  : url(../img/pop-low-cloud2.png);
        -webkit-animation : move 2.5s linear 0.5s infinite alternate;
      }
      .cloud3 {
        margin-left : 100px;
        margin-top  : -140px;
        background  : url(../img/pop-low-cloud3.png);
        -webkit-animation : move 3s linear infinite alternate;
      }

      @-webkit-keyframes move {
        from { -webkit-transform: translateX(-8px); }
        to   { -webkit-transform: translateX(8px);  }
      }
    }

    &.show-mid {

      .ball1 {
        position    : absolute;
        width       : 50px;
        height      : 41px;
        left        : 50%;
        top         : 50%;
        margin-left : 220px;
        margin-top  : -20px;
        background  : url(../img/pop-mid-ball.png);
        -webkit-animation : rotate 2s linear infinite;
      }

      .ball2 {
        position    : absolute;
        width       : 50px;
        height      : 41px;
        left        : 50%;
        top         : 50%;
        margin-left : -200px;
        margin-top  : -110px;
        background  : url(../img/pop-mid-ball.png);
        -webkit-animation : rotate 3s linear infinite;
      }

      .shit {
        position    : absolute;
        width       : 21px;
        height      : 22px;
        left        : 50%;
        top         : 50%;
        margin-left : 110px;
        margin-top  : 96px;
        background  : url(../img/pop-mid-shit.png);
        -webkit-animation : shit 2s infinite;
      }

      @-webkit-keyframes rotate {
        from { -webkit-transform : rotate(0deg); }
        to   { -webkit-transform : rotate(360deg); }
      }

      @-webkit-keyframes shit {
        0%   { -webkit-transform : translateY(-30px) scale(0.1, 0.1); }
        20%  { -webkit-transform : translateY(0) scale(1, 1); }
        50%  { opacity : 1; }
        100% { opacity : 0; }
      }
    }

    &.show-high {

      .hat {
        position    : absolute;
        width       : 162px;
        height      : 91px;
        left        : 50%;
        top         : 50%;
        margin-left : -81px;
        margin-top  : -150px;
        background  : url(../img/pop-high-hat.png);
        -webkit-animation : jump 0.5s infinite alternate;
      }

      .firework {
        position    : absolute;
        width       : 543px;
        height      : 366px;
        left        : 50%;
        top         : 50%;
        margin-left : -271px;
        margin-top  : -200px;
        background  : url(../img/pop-high-paper.png);
        -webkit-animation : boom 2s infinite;
      }

      @-webkit-keyframes jump {
        from { -webkit-transform : translateY(0); }
        to   { -webkit-transform : translateY(-10px); }
      }

      @-webkit-keyframes boom {
        0%   { -webkit-transform : scale(0.1, 0.1); }
        50%  { -webkit-transform : scale(2, 2); }
        90%  { opacity : 0; }
        100% { opacity : 0; }
      }
    }
  }

  &.low .show-low,
  &.mid .show-mid,
  &.high .show-high {
    display : block;
  }

  .tip {
    position    : absolute;
    width       : 640px;
    height      : 80px;
    left        : 50%;
    top         : 50%;
    margin-top  : -30px;
    margin-left : -320px;
    line-height : 40px;
    font-size   : 28px;
    color       : #fff;
    text-align  : center;

    span {
      color : #ffce09;
    }
  }

  .rule-link {
    display     : none;
    position    : absolute;
    width       : 640px;
    height      : 40px;
    left        : 50%;
    top         : 50%;
    margin-left : -320px;
    margin-top  : 80px;
    font-size   : 24px;
    color       : #ffce09;
    text-align  : center;
    text-decoration : underline;
  }

  &.low, &.mid, &.high {
    .rule-link {
      display : block;
    }
  }

  .btn {
    display     : none;
    position    : absolute;
    width       : 476px;
    height      : 85px;
    left        : 50%;
    top         : 50%;
    margin-left : -238px;
    margin-top  : 200px;
  }

  &.low .btn {
    display    : block;
    background : url(../img/pop-low-btn.png);
  }
  &.mid .btn {
    display    : block;
    background : url(../img/pop-mid-btn.png);
  }
  &.high .btn {
    display    : block;
    background : url(../img/pop-high-btn.png);
  }

  .share-show {
    position    : absolute;
    width       : 640px;
    height      : 30px;
    left        : 50%;
    top         : 50%;
    margin-left : -320px;
    margin-top  : 310px;
    font-size   : 22px;
    color       : #fff;
    text-align  : center;

    span {
      color : #ffce09;
    }
  }

  opacity : 0.01;
  -webkit-transition : all 0.5s;

  &.low, &.mid, &.high {
    opacity : 1;
    -webkit-transition : all 2s;
    .btn {
      display : block;
    }
  }
}


